<template>
    <div>
        <div id="components-layout-demo-basic">
            <a-layout>
              <Header></Header>

            <a-layout-content>
                <ul  v-lazy-container="{ selector: 'li'}" class="sub_list" v-for="(item,index) in list" :key="index" @click="detailBlog(item.id)">
                    <li class="list" style="line-height:150px;">
                        <img :src=item.img alt="" style="display: inline-block">
                    </li>
                    <li class="list content">
                        <strong>{{item.title}}</strong>
                        <div class="item_content" style="">{{item.content}}</div>
                        <div class="item_content" style="">{{item.time}}</div>
                    </li>

                    <li class="dealImg">
                        <img @click="editBlog(item.id)" src="../assets/bianji.png" alt="">
                        <img @click="delBlog(item.id,index)" src="../assets/lajitong.png" alt="">
                    </li>
                </ul>
            </a-layout-content>
            <a-layout-footer></a-layout-footer>
            </a-layout>
        </div>
    </div>
</template>

<script>
import {getBlogByUid,getBlogByKeyword,delBlogById,logout,updatePassword} from '../api/api'
import msgTip from '../msgTip'
import Header from '../global/Header'
export default {
    components:{
        Header
    },
    name:"Index",
    data () {
            return {
                list:[],
                // keyword:"",
                // username:"",
                // // headUrl:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                // headUrl:require('@/assets/bianji.png'),
            }
        },
        methods:{

            /**
             * 数据处理
             */
            init (list) {
                console.log(list);
                let result = [];
                for(let i = 0; i < list.length; i ++){
                    let content = list[i].content;
                    content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                        //去掉图片url正则
                        content = content.replace(capture,"")
                    });
                    var json_date = new Date(list[i].time).toJSON();
                    let time = new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
                    list[i].content = content;
                    list[i].time = time;
                    let randomNum = Math.floor(Math.random() * 6)+1;
                    console.log("../assets/summer/"+randomNum+".jpg");
                    list[i].img = require("../assets/summer/"+randomNum+".jpg");
                    result.push(list[i])
                }
                console.log(result);
                this.list = result;
            },


            /**
             * 获取全部
             */
            getBlog(){
                let _this = this;
                let uid = localStorage.getItem("uid");
                getBlogByUid({uid:uid}).then((res) => {
                    // console.log(res.data)
                    this.checkStatus(res.data.code);
                    if(res.data.code==200){
                        this.init(res.data.list);
                    }
                });
            },



            /**
             * 删除
             */
            delBlog (id,index) {
                let ids = {
                    id:id
                };
                window.event? window.event.cancelBubble = true : e.stopPropagation();
                this.msgTip({title:"删除博客",content:"确定要删除吗？",type:"danger",
                 onOk:()=>{
                    delBlogById(ids).then((res) => {
                        this.checkStatus(res.data.code);
                        if(res.data.code==200){
                            this.$message.success("删除成功！");
                            this.list.splice(index,1);
                        }
                    })
                },onCancel:()=>{
                            // this.$message.warn("删除成功！")
                }})

            },



            /**
             * 点击进入展示详情页面
             */
            detailBlog(id,type){
                let path = "/ShowBlog";
                if(type){
                    path = "/EditBlog"
                }
                let routeUrl = this.$router.resolve({
                    path: path,
                    query: {id:id}
                });
                window.open(routeUrl.href, '_blank');
            },


        },
        mounted:function() {
          console.log("getBlog");
          this.getBlog();
          console.log(localStorage.getItem("username"));

          // this.username = localStorage.getItem("username");

        }
}
</script>


<style>
*{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #wrap{
    margin:30px;
  }
  .sub_list{
    position: relative;
    cursor: pointer;
    display: inline-block;
    /*border:1px solid;*/
    height:150px;
    width: 90%;
    margin: auto;
    margin-top:20px;
    margin-left:20px;
    box-shadow: 1px 2px 5px rgba(67, 71, 68, 0.94);
    text-align: left;
    min-width:600px;
    transition: box-shadow .5s;
  }
  .sub_list:hover{
      box-shadow: 3px 5px 7px rgba(59, 61, 59, 0.94);
  }
  .sub_list::before{
    content:'';
    background-image: url(../assets/img1.jpg);
    background-size:100%;
    width:100%;
    height:150px;
    position:absolute;
    opacity: 0.1;

  }
  .sub_list .list{
    /*border:1px solid red;*/
    vertical-align: middle;
    display: inline-block;
    text-align: left;
    height: 100%;
    margin-right: 20px;
  }
  .sub_list .list img{
    /* height: 100%; */
    max-width: 150px;
    margin-left:10px;
  }
  .sub_list .content{
    height: 100px;
    max-width: 300px;
  }
  .dealImg{
      position: absolute;
      display: inline-block;
      white-space: nowrap;
      top:50%;
      margin-top:-10px;
      right:20px;
  }
  .dealImg img{
      max-height: 18px;
      max-width:20px;
      display: none;
      transition: display .5s;
  }

  .sub_list:hover .dealImg img{
    display: inline-block;
  }

   #components-layout-demo-basic .ant-layout-header,
    #components-layout-demo-basic .ant-layout-footer {
        /* background: #7dbcea; */
        color: #fff;
        min-width: 500px;
    }
#components-layout-demo-basic .ant-layout-header{
  top:0;
  position: sticky;
}

    #components-layout-demo-basic .ant-layout-content {
        margin-bottom: 20px;

    }

    strong{
        display:inline-block;font-size: 21px;overflow: hidden;max-width:300px;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .item_content{
        max-width:300px;display: -webkit-box;-webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;

    }
</style>

